import 'package:carousel_slider/carousel_slider.dart';
import 'package:casdon/app/config/theme/theme_extention.dart';
import 'package:casdon/modules/recipe/data/model/recipe_placeholder_data.dart';
import 'package:flutter/material.dart';

class CommonBannerWidget extends StatefulWidget {
  final List<String> imageUrls;
  final double? height;
  final bool? autoPlay;
  
  final void Function(int index)? onTap;

  const CommonBannerWidget({
    super.key,
    required this.imageUrls,
    this.onTap,
    this.height, 
    this.autoPlay,
  });

  @override
  State<CommonBannerWidget> createState() => _CommonBannerWidgetState();
}

class _CommonBannerWidgetState extends State<CommonBannerWidget> {
  int _currentIndex = 0;
  final CarouselSliderController _controller = CarouselSliderController();

  @override
  Widget build(BuildContext context) {
    final itemCount = widget.imageUrls.length;
    final showIndicator = itemCount > 1;
    final autoPlay = showIndicator && (widget.autoPlay ?? true);

    return Stack(
      children: [
        CarouselSlider.builder(
          itemCount: itemCount,
          carouselController: _controller,
          itemBuilder: (context, index, realIndex) {
            final imageUrl = widget.imageUrls[index];
            return GestureDetector(
              onTap: () {
                if (widget.onTap != null) {
                  widget.onTap!(index);
                }
              },
              child: ClipRRect(
                borderRadius: BorderRadius.circular(12),
                child: Image.network(
                  imageUrl,
                  fit: BoxFit.cover,
                  width: double.infinity,
                  errorBuilder: (context, error, stackTrace) {
                    return Image.network(
                      recipePlaceHolderImgUrl,
                      fit: BoxFit.cover,
                      width: double.infinity,
                      errorBuilder: (context, error, stackTrace) {
                        return Container(
                          color: Colors.grey[200],
                          child: const Icon(Icons.image_outlined, color: Colors.grey),
                        );
                      },
                    );
                  },
                ),
              ),
            );
          },
          options: CarouselOptions(
            height: widget.height ?? 180,
            enableInfiniteScroll: showIndicator,
            autoPlay: autoPlay,
            viewportFraction: 0.94,
            enlargeCenterPage: true,
            onPageChanged: (index, reason) {
              setState(() {
                _currentIndex = index;
              });
            },
          ),
        ),
        if (showIndicator)
          Positioned(
            bottom: 8,
            left: 0,
            right: 0,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: List.generate(
                widget.imageUrls.length,
                (index) => AnimatedContainer(
                  duration: const Duration(milliseconds: 300),
                  margin: const EdgeInsets.symmetric(horizontal: 4),
                  width: _currentIndex == index ? 12 : 8,
                  height: 8,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: _currentIndex == index ? context.colorScheme.primary : Colors.grey,
                  ),
                ),
              ),
            ),
          ),
      ],
    );
  }
}
